<template>
    <!-- 值得买-选购指南 -->
  <div class="select-buy">
    <mynavbar></mynavbar>
    <img class="poster" src="https://yanxuan.nosdn.127.net/ce23441f241b4a97af30a7a115ec6645.jpg">
    <div v-for="(v,index) in imgArr" :key="index" class="expect">
        <img :src="v" alt="" class="expect-img">
        <div class="paihang" @click="fun(v.proid)">
            <div class="box" v-for="(item,index) in paihangArr" :key="index"> 
                 <img :src="item.img1"/>
                 <div class="text">
                     <p>{{item.proname }}</p>
                     <p> 
                         <span><i>¥</i>
                             {{ item.originprice }}</span>
                         <span><van-icon name="cart-circle-o" color="red" size="1.25rem"/></span>
                     </p>
                 </div>
             </div>
        </div>
       </div>
  </div>
</template>

<script>
import service from '@/request/service'
import mynavbar from '../../yjj/item/mynavbar.vue'
export default {
    components:{
        mynavbar
    },
    data(){
        return{
            imgArr:[
                'https://yanxuan.nosdn.127.net/e1cdc489f129498ba0c96f01383c7ed9.jpg',
                'https://yanxuan.nosdn.127.net/1ec20bb841144fa5bab749e8b8cf3733.jpg',
                'https://yanxuan.nosdn.127.net/fb20c0cddb0d44eeb4f1559c4544c847.jpg',
                'https://yanxuan.nosdn.127.net/511ecb04ba3f4ba4ad0b6acb42830776.jpg',
                'https://yanxuan.nosdn.127.net/41e3c428300944898afded69001e2480.jpg',
                'https://yanxuan.nosdn.127.net/c7d95e3499704382ab601d9cf7cdd360.jpg',
            ],
            paihangArr:[],
            Count:1,
        }
    },
    mounted(){
        service({
            url:'api/pro/seckilllist',
            method:'get',
            params:{
                limitNum:3,
                count:4,
            }
            
        }).then(res=>{
            this.paihangArr = res.data.data
        })
    },
    methods:{
        fun(v){
            this.$router.push({path:'/infogoods',query:{id:v}})
            // this.$router.push(`/infogoods/${v}`)
        }
    }
}
</script>

<style scoped>
    .select-buy{
        background:#d74c00;
    }
    .select-buy .poster{
        width:100%;
    }
    .expect{
        background: #fff;

        margin:0 0.625rem;
        margin-bottom:.875rem;
        border-radius: .625rem;
    }
    .expect-img{
        width:100%;

        border-top-left-radius: .625rem;
        border-top-right-radius: .625rem;
    }
    .paihang{
    /* height:100%; */
    /* background: #fbd66c; */
    column-count:3;
    column-gap:.1rem;
    box-sizing: border-box;
    justify-content: space-around;
    display: flex;

    margin-top:.6875rem;

    }
    .paihang .box {
    break-inside: avoid;
    border-radius: .625rem;
    background-color: #fff;
    margin-bottom: .9rem;
    width: 7.1875rem;
    height:12.375rem;
    /* width: 31%; */
    }
    .paihang .box img{
    height:7.1875rem;
    width: 7.1875rem;
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
    }
    .paihang  .text{
    padding: 8px;
    text-align: left;
    font-weight: bold;
     height: 32%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .paihang  .text p:first-child{
    font-size: .6875rem;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
    }
    .paihang  .text p:last-child{
    color: #f66;
    font-size: .6875rem;
    display:flex;
    justify-content: space-between;
    align-items:center;
    }
</style>